<template>
	<CenterBox>
    <div class="signup-head">
      立即注册，即可免费使用
    </div>
    <div>
      <ZshInput v-model="signForm.email" type="email" placeholder="电子邮件" :error="errMsg.email"></ZshInput>
      <ZshInput v-model="signForm.password" type="password" placeholder="密码" :error="errMsg.password"></ZshInput>
      <ZshInput v-model="signForm.mobile" placeholder="手机号" :error="errMsg.mobile"></ZshInput>
    </div>
    <ZshButton name="signup" :loading="loading" @click="signup">立即注册</ZshButton>
    <div class="signin">
      <span style="font-size:13px;color:#888888">已有账户?<router-link to="signin">登录</router-link></span>
    </div>
  </CenterBox>
</template>

<script>
  import CenterBox from './components/center-box'
  import {isEmail,isPhone,isValidPwd} from "@/libs/util";
  import ZshInput from './components/zsh-input'
  import ZshButton from './components/zsh-button'
  import {register} from "@/api/auth";

  export default {
    data(){
      return {
        loading: '',
        signForm:{

        },
        errMsg:{

        }
      }
    },
    components:{
      ZshInput,
      ZshButton,
      CenterBox
    },
    methods:{
      signup(){
        if(this.loading == 'signup'){
          return
        }
        if(this.verifyForm()){
          this.loading = 'signup'
          register(this.signForm).then(res => {
            if(res.code == 200){
              this.$alert('注册成功！欢迎您的使用和支持！', '提示', {
                confirmButtonText: '确定',
                center:true,
                callback: action => {
                  this.$router.replace({path:'signin'})
                }
              });
            }else{
              this.$message.error(res.msg)
            }
          }).finally(() => {
            this.loading = ''
          })
        }
      },
      verifyForm(){
        let flag = true
        this.errMsg = {}
        if(!isPhone(this.signForm.mobile)){
          this.errMsg.mobile = '请输入有效的手机号'
          flag = false
        }
        if(!isEmail(this.signForm.email)){
          this.errMsg.email = '请输入有效的邮箱格式'
          flag = false
        }
        if(!isValidPwd(this.signForm.password)){
          this.errMsg.password = '密码不能少于8位'
          flag = false
        }
        return flag
      }
    }
  }
</script>

<style scoped lang="less">

  .hidden {
    display: none;
  }

  .signup-head {
    font-size: 21px;
    margin: 40px 0;
    text-align: left;
  }

  .submit{
    margin:20px 0;
    text-align: center;
    .el-button{
      width: 100%;
      box-sizing: border-box;
      height: 40px;
    }
  }

  .loading {
    width: 80px !important;
    box-sizing: border-box;
    border-radius: 20px;
  }
  .signup {
    margin: 10px 0;
  }
</style>
